<template>
  <el-dialog
    title="工作交接日志"
    :close-on-click-modal="false"
    draggable
    v-model="open"
    width="70%"
  >
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <SearchTool
        :code="{
          factory: 'factory',
          workshop: 'workshopCode',
          line: 'lineCode',
          section: 'sectionCode',
        }"
        :titles="{
          factory: '工厂',
          workshop: '工段',
          line: '产线',
          section: '工艺段',
        }"
        :itemStyle="{
          width: '220px',
        }"
        v-model:factory="queryParams.factory"
        v-model:workshop="queryParams.workshopCode"
        v-model:line="queryParams.lineCode"
        v-model:section="queryParams.sectionCode"
        @sectionChange="getStationList"
      ></SearchTool>
      <el-form-item label="岗位" prop="stationCode">
        <el-select v-model="queryParams.stationCode" style="width: 220px" clearable filterable>
          <el-option
            v-for="(item, index) in stationList"
            :key="index"
            :label="item.stationName"
            :value="item.stationCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间" prop="workTime">
        <el-date-picker
          v-model="queryParams.workTime"
          value-format="YYYY-MM-DD"
          type="date"
          :disabled-date="disabledDate"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
      <template v-if="logList.length">
        <el-card v-for="(item, index) in logList" :key="index">
          <logContent :formData="item" :key="index" class="infinite-list-item"></logContent>
        </el-card>
      </template>
      <template v-else>
        <el-empty :image-size="100" />
      </template>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="MatDialog">
import { queryLogList } from "@/api/productionMgt/changeShifts";
import { getStation } from "@/api/base/processSection";
import logContent from "./logContent.vue";
import { ref, toRefs, defineModel, reactive, watch } from "vue";

const open = defineModel("show");
const loading = ref(true);
const showSearch = ref(true);
const stationList = ref([]);

const total = ref(0);
const queryRef = ref("queryRef");
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    factoryCode: undefined,
    workshopCode: undefined,
    lineCode: undefined,
    sectionCode: undefined,
    stationCode: undefined,
    workTime: undefined,
  },
});

const { queryParams } = toRefs(data);
const logList = ref([]);
const load = () => {
  if (logList.value.length === total.value) {
    return;
  }
  queryParams.value.pageNum++;
  loading.value = true;
  queryLogList({
    ...queryParams.value,
  }).then((response) => {
    logList.value.concat(response.rows);
    total.value = response.total;
    loading.value = false;
  });
};
watch(
  () => open.value,
  (newValue) => {
    if (newValue) {
      getList();
    }
  }
);

/** 查询字典类型列表 */
function getList() {
  loading.value = true;
  queryLogList({
    ...queryParams.value,
  }).then((response) => {
    logList.value = response.rows;
    console.log(logList.value);

    total.value = response.total;
    loading.value = false;
  });
}

/** 取消按钮 */
function cancel() {
  open.value = false;
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  // dateRange.value = [];
  queryRef.value.resetFields();
  handleQuery();
}

function getStationList({ code }) {
  const params = {
    pageSize: 10000,
    pageNum: 1,
    sectionCode: code,
  };
  getStation(params).then((response) => {
    stationList.value = response.rows;
  });
}

// getList();
</script>

<style lang="scss" scoped>
.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  padding: 10px;
  background: var(--el-color-primary-light-9);
}

.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

.el-card + .el-card {
  margin-top: 10px;
}
</style>
